<template>
  <div v-if="item.children">
    <template v-if="item.children.length == 0">
      <el-menu-item :index="item.path">
        <i class="icon" :class="item.icon"></i>
        <!-- <a :href="item.linkUrl" target="right">{{item.title}}</a> -->
        {{item.title}}
      </el-menu-item>
    </template>
    <template v-else :index="item.path">
      <div slot="title" class="el-submenu__title">
        <i class="icon" :class="item.icon"></i>
        {{item.title}}
      </div>
      <template v-for="child in item.children">
        <SidebarItem
          v-if="child.children&&child.children.length>0"
          :item="child"
          :key="child.path"
        />
        <el-menu-item
          v-else
          :key="child.path"
          :index="child.linkUrl"
          style="padding-left:58px"
          @click="routerElMain(child.url)"
        >
          <!-- <a :href="child.linkUrl" target="right">{{child.title}}</a> -->
          {{child.title}}
        </el-menu-item>
      </template>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  methods: {
    routerElMain (url) {
      this.$router.push(url)
    }
  }
}
</script>

<style scoped>
</style>
